<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>

    <style>


    </style>
</head>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
<script>
    $(function () {
        $("name").blur(function () {
            var ctxPath='[[@{/}]]';
            var  url="emp/name/"+this.value
            $.get(url,null,function (response) {
                alert(JOSN.stringify(response));
                if (response.count()>0){
                    $("#checkResult").css("color","red").html("用户名不可用");
                } else{
                    $("#checkResult").css("color","green").html("用户名可用");
                }
            })
        })
    })
</script>
<body>

<form th:action="@{/emp}" th:object="${emp}" method="post">
    <h1 th:if="${emp.id==null}">新增员工</h1>
    <div th:if="${emp.id!=null}">
        <h1>修改员工</h1>
        <input type="hidden" th:field="*{id}">
        <input type="hidden"  name="_method" value="PUT">
    </div>


    <p>
      姓名：  <input type="text" th:field="*{name}">
        <span id="#checkResult"></span>
    </p>
    <p>
       性别： <input type="radio"th:field="*{sex}" value="M">男
        <input type="radio" th:field="*{sex}" value="F">女
    </p>
    <p>
      年龄：  <input type="text" th:field="*{age}">
    </p>
    <p>
      生日：  <input type="text" th:field="*{birthday}">
    </p>
    <p>
       证件类型:<select th:field="*{idType}">
        <option value="">-请选择-</option>
        <option value="1">身份证</option>
        <option value="2">学生证</option>
        <option value="3">港澳通行证</option>
        <option value="4">其他</option>
    </select>
    </p>
    <button>保存</button>
</form>
</body>
</html>